<template>
  <div class="expandCustomerIndexCheck">
    <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-form-item label="年度：">
        <el-date-picker
            v-model="year"
            align="right"
            type="year"
            placeholder="选择年"
            @change="changeTime"
            size="small">
        </el-date-picker>
        </el-form-item>
        <el-form-item label="区域：" size="small">
            <el-input v-model="params.area" placeholder="全部"></el-input>
        </el-form-item>
        <el-form-item label="指标：" size="small">
            <el-select v-model="params.index" placeholder="全部">
            <el-option :label="item.name" :value="item.value" v-for="(item,index) in indexList" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleClick" id="monitorEnter" size="small" >查询</el-button>
            <el-button type="" size="small" @click="handleReset">重置</el-button>
        </el-form-item>
    </el-form>
    <div>
        <el-button type="success" size="small" @click="exportList">导出</el-button>
    </div>
    <div class="tal">
        <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%">
            <el-table-column
            align='center'
            fixed
            prop="date"
            label="区域"
            width="120">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleArea(scope.row)">{{scope.row.areaName}}</el-button>
            </template>
            </el-table-column>
            <el-table-column
            align='center'
            prop="standardType"
            label="指标"
            width="120">
              <template slot-scope="scope">{{scope.row.standardType == 1?'拜访量':'拓店量'}}</template>
            </el-table-column>
            <el-table-column
            align='center'
            prop="year"
            label="年份"
            width="120">
            </el-table-column>
            <el-table-column
            align='center'
            prop="atSummary"
            :label='`${mouth}`'
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="januaryPlan"
            label="1月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="februaryPlan"
            label="2月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="marchPlan"
            label="3月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="aprilPlan"
            label="4月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="mayPlan"
            label="5月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="junePlan"
            label="6月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="julyPlan"
            label="7月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="augustPlan"
            label="8月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="septemberPlan"
            label="9月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="octoberPlan"
            label="10月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="novemberPlan"
            label="11月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
            <el-table-column
            align='center'
            prop="decemberPlan"
            label="12月份"
            width="120"
            :formatter="moneyFormatter">
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageNum"
        :page-size="pageData.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, prev, sizes, pager, next, jumper"
        :total="totalSize">
        </el-pagination>
    </div>
  </div>
</template>
<script>
import util from '@/common/utils'
import api from "@/api/apiPath"
export default {
    name:'expandCustomerIndexCheck',
    title:'拓客指标考核',
    data(){
        return {
            mouth:'',
            year:new Date(),
            params:{
                area:'',
                index:''
            },
            indexList:[
                {value:'',name:'全部'},
                {value:1,name:'拜访量'},
                {value:2,name:'拓店量'},
            ],
            pageData:{
                pageNum:1,
                pageSize:10
            },
            tableData:[],
            totalSize:0,
            val:''
        }
    },
    components:{},
    computed:{},
    mounted(){},
    created(){
      this.mouth = '1月-' + (new Date().getMonth()+1)+'月汇总'
      this.handleCheck()
    },
    activated(){
      this.handleCheck()
    },
    methods:{
      moneyFormatter(row, column, cellValue, index){
        if (cellValue) {
          return cellValue.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
        } else {
          return cellValue
        }
      },
      handleSizeChange(val) {
        this.pageData.pageSize = val
        this.handleCheck()
      },
      handleCurrentChange(val) {
        this.pageData.pageNum = val
        this.handleCheck()
      },
      handleClick(){
        this.pageData.pageNum = 1
        this.handleCheck()
      },
      handleCheck() {
        console.log(this.year);
        console.log(this.val);
        let year = ''
        if(this.val){
          year = this.year
        }else{
          if(this.year){
            year = this.year.getFullYear()
          }
        }
        this.$axios.post('spread/enaluate/enaluateArea',{
          year:year,
          areaName:this.params.area,
          standardType:this.params.index,
          pageNum:this.pageData.pageNum,
          pageSize:this.pageData.pageSize
          
        }).then(res=>{
          console.log(res)
          this.tableData = res.list
          this.totalSize = res.total
        }).catch(error=>{
          console.log(error);
          
        })
          
      },
        // 年度改变
      changeTime(val){
        console.log(val);
          if(val){
            this.val = 1
            this.year = util.getTimeString(val.getTime()).slice(0,4)
          }
      },
        //   重置
      handleReset(){
          this.year = new Date()
          this.params.area = ''
          this.params.index = ''
      },
      handleArea(row){
          this.$router.push({path:'/areaIndexCheck',query:{
            row:JSON.stringify(row)
          }})
      },
      //导出
      exportList() {
        let year = ''
        if(this.val){
          year = this.year
        }else{
          if(this.year){
            year = this.year.getFullYear()
          }
          year = this.year.getFullYear()
        }
        let param = {
          year:year,
          areaName:this.params.area,
          standardType:this.params.index,
        };
        let url = api.domain + '/spread/enaluate/enaluateAreaPut'
        this.axios({
          method: "post",
          url: url,
          data: param,
          headers: {
            "content-type": "application/json; charset=utf-8",
            token: sessionStorage.getItem("cmsUser")
              ? JSON.parse(sessionStorage.getItem("cmsUser")).tokenId
              : ""
          },
          responseType: "blob"
        })
          .then(res => {
            this.downloadFile(res.data);
          })
          .catch(res => {
            console.log(res);
            
            //全局拦截器原因,返回参数为catch'
            this.downloadFile(res.data);
          });
      },
      downloadFile(data) {
        if(!data){
            this.$message({
                message: "导出错误",
                type: "warning"
            });
            return
        }
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        let fileName = `导出${util.getTimeString(new Date())}.xls`;
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
        this.$message({
          message: "导出成功",
          type: "success"
        });
      },
    },
}
</script>

<style lang='stylus' scoped>
.expandCustomerIndexCheck{
    .el-form-item{
        vertical-align :middle;
    }
    .tal,.pagination{
        margin-top :20px;
    }

}

</style>